<template>
  <div class="channels-container">
    <!-- 顶部导航 -->
    <van-nav-bar title="频道" class="top-nav">
      <template #left>
        <i class="iconfont icon-zuofanhui"></i>
      </template>
      <template #right>
        <i class="iconfont icon-shezhi" style="color:#535353"></i>
      </template>
    </van-nav-bar>
    <!-- 频道列表 -->
    <van-grid class="channels-list" column-num="2">
      <van-grid-item
        v-for="item in channels"
        :key="item.id"
        class="channel"
        @click="showPopup = true"
      >
        <div slot="default">
          <van-image :src="item.image" class="good-pic" fit="contain">
          </van-image>
          <h3 class="tit">{{ item.name }}</h3>
          <p class="dsc">{{ item.description }}</p>
        </div>
      </van-grid-item>
    </van-grid>
    <!-- 推荐弹出层 -->
    <!-- 频道列表 -->
    <van-popup
      v-model="showPopup"
      position="right"
      :style="{ height: '100%', width: '100%' }"
      closeable
      close-icon-position="top-left"
      close-icon="arrow-left"
    >
      <recommend></recommend>
    </van-popup>
  </div>
</template>

<script>
import recommend from './recommend'
export default {
  // 定义属性
  data() {
    return {
      channels: [
        {
          id: 1,
          name: '咖啡',
          description: '为了你的理想生活',
          image: require('@/assets/images/search/recommendchannels/pic1.png')
        },
        {
          id: 2,
          name: '复古铁盒',
          description: '日常生活中的事物',
          image: require('@/assets/images/search/recommendchannels/pic2.png')
        },
        {
          id: 3,
          name: '8分钟在线',
          description: '认真生活',
          image: require('@/assets/images/search/recommendchannels/pic3.png')
        },
        {
          id: 4,
          name: '生活的态度',
          description: '保持年轻，流泪',
          image: require('@/assets/images/search/recommendchannels/pic4.png')
        },
        {
          id: 5,
          name: '小夹子',
          description: '怀旧是一种疾病',
          image: require('@/assets/images/search/recommendchannels/pic5.png')
        },
        {
          id: 6,
          name: '木质相框',
          description: '在工匠的心中',
          image: require('@/assets/images/search/recommendchannels/pic6.png')
        },
        {
          id: 7,
          name: '流行配饰',
          description: '天使爱美丽',
          image: require('@/assets/images/search/recommendchannels/pic7.png')
        },
        {
          id: 8,
          name: '化妆品',
          description: '随心所欲',
          image: require('@/assets/images/search/recommendchannels/pic8.png')
        }
      ],
      showPopup: false
    }
  },
  components: {
    recommend
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
// @import url('~@/styles/nav-bar.less'); //引入navbar样式，此样式控制所有search下的子页面导航样式
.channels-container {
  .channels-list {
    height: 92vh;
    overflow-y: auto;
    padding: 0 57px;
    .channel {
      margin-top: 40px;
      .good-pic {
        width: 308px;
        height: 172px;
      }
      .tit {
        margin: unset;
        font-family: PingFangSC-Medium;
        font-size: 24px;
        color: #484747;
        font-weight: normal;
        line-height: 36px;
      }
      .dsc {
        margin: unset;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #9b9b9b;
        font-weight: normal;
        line-height: 30px;
      }
    }
    .van-grid-item__content--center {
      padding: unset;
    }
  }
  // 取消自带边框
  [class*='van-hairline']::after {
    border: none;
  }
}
</style>
